work4ai ダークモード
https://gyazo.com/cbe20b5f4b4f046a2ca44ef6be890288
システムのテーマがダークのときに勝手に適用されます
修正案&要望↓
ダークモードの時にdate modified with meの縁取りが消えちゃってますねwogikaze.icon
!important あたりが原因だと思うのでいじってみます
難しい、消し飛ばすとライトテーマに負けるのか
https://gyazo.com/af26b90158c9d08044476f2887e362cc
上のツールバーの背景色
permanent link行？の色を変えてほしいwogikaze.icon
これはどれだろう？nomadoor.icon
permalinkのことでした(うろ覚えでかかない方がいいな)wogikaze.icon
上のやつなので修正done
黄色いやつか！分かってなかった！nomadoor.icon
コードブロック上だと消えるnomadoor.icon
元のCSSの設計がいまいちですねここ…
https://gyazo.com/02b39460c588f86d1c1fefbf2584852a
cursor-lineのリンク色もコントラスト低すぎる？
そんなに気にならないけどホームでコードブロックの文字が濃くて読みずらいので変えたwogikaze.icon
色わからないのでとりあえず他のdescription色にした
画像の背景色をシルバーにnomadoor.icon
透過画像+黒文字系の画像が読みにくかった
赤い線の走る黒色がかっこいいtakker.icon
code:style.css
@media (prefers-color-scheme: dark) {
body{
/* --テキスト-- */
color: var(--page-text-color) ;
/* --- 全体 --- */
/* --- トップ --- */
--card-bg: rgb(44 58 77 / 65%) !important;
/* --- ヘッダー --- */
--tool-text-color: #f55600; /* プロジェクト名 */ --new-button-bg: transparent; /* 新規作成ボタン ↓ */
--new-button-hover-bg: transparent;
--new-button-active-bg: transparent;
--new-button-vertical-color: #f55600; /* ↑ */ --search-form-icon-color: #f55600; /* 🔍 */ --search-form-text-color: #555; /* 検索の文字 */ --navbar-icon-hovered-color: #d3d3d3; /* ^:hover */ --navbar-icon-active-color: #f55600 ; /* --- ページ --- */
--telomere-updated: #a9450f; /* テロメア編集 */ --telomere-unread: #a9450f; /* テロメア未読 */ /* --- ページメニュー --- */
/* --- コード --- */
/* --- 関連ページ ラベルデザイン --- */
--relation-label-text:#304ea2;
}
a {
color: var(--page-link-color)
}
/* ---変数がないもの --- */
/* ---スクロールバー--- */
::-webkit-scrollbar-thumb{
}
::-webkit-scrollbar-track{
}
/* --- トップ --- */
.grid {
li {
a {
&:hover {
/* hover時の共通スタイル */
}
.content .icon img {
filter: brightness(0.9);
}
}
&.page-list-item.unread {
a {
outline: 2px solid #a9450f !important; }
}
&.pin {
a {
background-color: var(--card-bg) !important;
&:hover {
outline: none !important;
}
.header.pinned {
background-color: rgb(18 26 41) !important;
.title {
background-image: linear-gradient(to right, #d2d2d2 50%, #5e656e 50%) !important; }
}
}
&:first-of-type a .header.pinned {
background-color: transparent !important;
.title {
background-image: linear-gradient(to right, var(--vivi-pink) 50%, #d2d2d2 50%) !important; }
}
}
}
}
/** .grid li.page-list-item.grid-style-item.unread a{outline: 3px solid #6ac983;} **/ /* --- ヘッダー --- */
.app .navbar{border-bottom: 7px solid #1b212a;} .search-form .form-group input:is(:focus, .for-mobile) {
}
--new-button-horizontal-color: #d2d2d2 !important; --new-button-vertical-color: #d2d2d2 !important; }
.navbar .open .navbar-brand .kamon-caret-down{color: #d3d3d3 !important;} .search-form .form-group .button-container button.focus,.search-form .form-group .button-container button.for-mobile{color: #f55600 !important;} .navbar .navbar-menu >li>a {
&:hover, &:active, &:focus {
}
}
/* --- 検索欄 --- */
.dropdown-menu {
}
}
/* --- プロジェクト切り替え --- */
.dropdown-menu>li>a{
}
/* --- ページ --- */
.line {
img.icon{filter: brightness(0.8) saturate(1.2);}
strong.level{ /* 太字の色 */
}
}
/* --- 画像 --- */
.line img.image, video, .iframe-video-player iframe{
border: 2px solid #3b4758 !important; }
/* --- テーブル --- */
.table-block {
.cell{
outline-offset: -1px;
}
.table-block-start{
a{
font-weight: 500;
}
}
}
/* --- コード --- */
.line span.code-block .code-block-start{
a{
font-weight: 500;
}
}
.line.permalink span.code-block{
}
/* --- で挟んだコード --- */
.line .code.highlight{
}
/* --- 外部リンクにホバーで注釈 --- */
.line:not(:has(.deco-\.)) a.link:not(.icon){
&::before{border-top: 6px solid #ad3f05 !important;} }
.line:not(.cursor-line) .deco-\.:has(.link){
&::before{border-top: 6px solid #ad3f05 !important;} }
/* --- 関連ページ検索 --- */
.related-page-list .toolbar .related-page-list-search:focus-within{
.fa-search{
}
}
/* --- ページメニュー --- */
/* --- 検索ページ --- */
.list li.page-list-item{
}
/* --- スマホ時拡大メニュー --- */
.expandable-menu{background-color: #111827 !important;} }